<template>
  <el-form :model="form" style="height: 100%;" inline ref="form" label-position="top">
    <el-form-item prop="biz_id" style="width:100%">
      <cl-select v-model="form.biz_id" :disabled="!isAdd" filterable @change="changeBiz" style="width: 100%">
        <el-option v-for="item in business" :key="item.biz_id" :label="item.biz_name" :value="item.biz_id" />
      </cl-select>
    </el-form-item>
    <el-form-item label="预约门店" prop="dept_id" style="width: 100%">
      <el-select style="width: 100%;" filterable v-model="form.dept_id" @change="shopChange" value-key="dept_id">
        <el-option v-for="item in cartShopList" :key="item.dept_id" 
          :value="item.dept_id" :disabled="item.bus_state == 2" :label="item.dept_name">
			<span>{{ item.dept_name }}</span><span style="font-size: 12px;" :class="{ctype_red: item.ctype == 1}">({{ item.ctype == 1 ? '直营店' : '合作店' }})</span>
		</el-option>
      </el-select>
      <!-- <cl-shop-select v-model="form.dept_id" filterable :biz_id="form.biz_id" style="width: 100%" @change="shopChange" /> -->
    </el-form-item>

    <el-form-item style="width: 100%">
      <el-input placeholder="请输入门店名称" style="width: 100%" v-model="form.keyword" @input="searchClick"
        class="input-with-select">
        <el-select v-model="form.city_id" placeholder="请选择" filterable style="width: 100px" slot="prepend"
          @change="cityChange">
          <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-input>
    </el-form-item>

    <!-- <el-form-item label="预约城市">
			<cl-select
				v-model="form.city_id"
				placeholder="请选择"
				filterable
				clearable
				style="width: 150px"
			>
				<el-option
					v-for="item in cityList"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</cl-select>
		</el-form-item>
		<el-form-item label="预约时间" prop="appoint_date">
			<cl-date-picker
				v-model="form.appoint_date"
				value-format="yyyy-MM-dd"
				style="width: 150px"
				:clearable="false"
				:picker-options="pickerOptions"
			/>
		</el-form-item>
		<el-form-item label="预约类型" prop="cus_type">
		   <cl-select
					v-model="form.cus_type"
					style="width: 140px"
				>
					<el-option :value="0" label="全部" />
					<el-option :value="1" label="新客" />
					<el-option :value="2" label="老客" />
				</cl-select>
		</el-form-item> 
		<el-form-item>
			<el-button type="primary" icon="el-icon-search" @click="search" :loading="loading">
				查找
			</el-button>
			<el-button plain @click="reset" :disabled="loading">重置</el-button>
		</el-form-item> -->
  </el-form>
</template>
<script>
import dayjs from "dayjs";
// import { cityList } from "@/assets/countryLevel3";
export default {
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    isAdd: Boolean,
    loading: Boolean
  },
  data() {
    return {
      cityList: [],

      pickerOptions: {
        // 限制预约时间
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      },
      form: {
        biz_id: "",
        city_id: "", //所属
        appoint_date: dayjs().format("YYYY-MM-DD"),
        cus_type: 0,
        keyword: ""
      },
      shopList_: [],
      cartShopList: []//预约门店列表
    };
  },
  computed: {
    shopList() {
      const { biz_id } = this.form;
      return this.getBizRefData(biz_id, "shop_childs");
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(v) {
        console.log(v);
        this.form = { ...v };
      }
    }
  },
  methods: {
    async init(res) {
      await this.getShopList();
      await this.getCartShopList()
    },
    async getCartShopList() {
      console.log('getCartShopList', this.$service.shop.cartShop);

      let res = await this.$service.shop.cartShop({ biz_id: this.form.biz_id })
      this.cartShopList = res
    },
    search() {
      this.change();

      this.$emit("search", this.form);
    },
    searchClick() {
      this.change();
      this.$emit("searchClick", this.form.keyword);
    },
    reset(refresh = true) {
      this.$refs.form.resetFields();
      const { biz_id } = this.form;
      // let list = this.getBizRefData(biz_id, "shop_childs");
      // this.form.dept_id = list[0]?.dept_id ?? "";
      this.change();
      if (!refresh) return;
      this.$emit("reset", this.form);
    },
    change() {
      console.log(this.form.dept_id, '9999999');

      this.$emit("input", this.form);
      console.log(this.form, '1111111111');

      this.$emit("change", this.form);
    },

    shopChange(e) {
      console.log('eeeee', e)
      this.form.city_id = this.cartShopList.find(item => item.dept_id == e).city_id
      this.search()
    },

    cityChange() {
      this.form.dept_id = ""
      this.$set(this.form, 'dept_id', '')
      console.log('this.form.dept_id', this.form.dept_id)
      this.search()

    },

    changeBiz() {
      this.form.dept_id = "";
      this.form.city_id = "";
      // this.getShopList();
      this.getCityList();
    },
    // 获取门店
    async getShopList() {
      const { biz_id } = this.form;
      await this.getBizRefShop(biz_id);
      await this.getCityList()
      let list = this.getBizRefData(biz_id, "shop_childs");
      this.shopList_ = list
      this.form.dept_id = list[0]?.dept_id ?? "";
      this.form.city_id = list[0]?.city_id ?? "";
      console.log('this.form.city_id', this.form.city_id)
      await this.search();


    },
    async getCityList() {
      const { biz_id } = this.form;
      this.$service.spread.newGetbizcity({ biz_id, user_manager: 1 }).then(data => {
        let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
        this.cityList = list;
        // if (!this.form.city_id) {
        // 	this.setCityId();
        // } else {
        // 	this.search();
        // }
      });
    },
    // setCityId() {
    // 	this.form.city_id = this.cityList[0].value;
    // 	this.search();
    // }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-input-group__prepend {
  background-color: #fff !important;
}

::v-deep .el-input__suffix {
  right: 14px !important;
}
.ctype_red {
	color: red;
}
</style>
